<template>
	<view class="" style="width: 100vw;height: 100vh">
		<view  style="min-height: 100vh">
			<hx-navbar title="工厂授权列表" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
				transparent="auto"></hx-navbar>
			<view class="container">
				<view class="searchWrap">
					<view class="searchBox" :style="{background:QianmenonlyBackgournd}">
						<image src="/static/index/icon_search.png" mode="scaleToFill" class="icon"></image>
						<view class="" style="height: 18px ;border: 1rpx solid #ACADAD;margin-left: 20rpx;"></view>
						<input type="text" class="search_input" v-model="search_name" @confirm="search"
							placeholder="搜索工厂名称" placeholder-class="color-6">
					</view>
				</view>

				<!-- 内容 -->
				<view class="body_class">
					<view class="tab_box">
						<view class="tab_dd">
							地区

						</view>
						<view v-for="(item, index) in tabList">
							<view class="tab_dd" :class="[{sel:item.id == tabCurrent},{ nsel:item.id != tabCurrent}]"
								:style="[selStyle]" :key="index" @tap="set_tab(index)"
								style="border-right: 1px solid #ACADAD;">
								<view>{{item.name}} </view>
							</view>
						</view>
					</view>
					<!-- 信息 -->
					<view class="mess_class">
						<view class="mess_hang" :style="[selStyle]" v-for="(item,index) in listData">
							<view class="">
								<image class="mess_image" :src="item.image" mode=""></image>
							</view>
							<view class="">
								<view class="mesee_name" style="">
									{{item.name}}
								</view>
								<view class="mesee_ip" style="">
									{{item.ip}}
								</view>
							</view>
						<!-- 	<view class="mesee_xiangqing" @tap="toDetail(15, 1)">
								内容详情
							</view> -->
						</view>

					</view>

				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search_name: "",
				QianmenonlyBackgournd: this.$store.state.QianmenonlyBackgournd,
				tabCurrent: 1,
				listData: [{
					id: 1,
					image: '../../../static/user/pj_logo.jpg',
					name: "卢德堡精酿啤酒厂",
					ip: '北京'
				},],
				tabList: [{
					id: 1,
					name: '全部',

				}, {
					id: 2,
					name: '已签约工厂',

				}, {
					id: 3,
					name: '待签约工厂',

				}, ],
				selStyle: {
					'--selectColorSize': this.$store.state.selectColorSize, //字体颜色
					'--buttonBcak': this.$store.state.buttonBcak, //按钮颜色
					'--borderSty': this.$store.state.borderSty, //选中背景线颜色
					'--QianmenonlyBackgournd': this.$store.state.QianmenonlyBackgournd, //单个背景颜色
					'--QianmenonlyBackgournd2': this.$store.state.QianmenonlyBackgournd2, //单个背景颜色
					buttonBcak: this.$store.state.buttonBcak, //选中背景线颜色: this.$store.state.borderSty, //选中背景线颜色
				},

			}
		},
		onPullDownRefresh() {

			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 2000)
		},
		methods: {
			search: function(e) {
				console.log("搜索回车：",e.detail.value)

			},
			set_tab: function(id) {
				this.tabCurrent = id + 1
			},
			// 查看详情
			toDetail(id, type) {
				this.$common.navigateTo('/pages/article/index?id=' + id + '&id_type='+type)
			},
		}
	}
</script>

<style scoped lang="scss">
	.container{
		margin: 30rpx auto;	
	}
	.body_class {
		width: 690rpx;
		margin: 30rpx auto;
	}

	.searchWrap {
		width: 100%;
		padding: 0 40rpx;

		.searchBox {
			width: 100%;
			height: 80rpx;
			// background-color: #fff;
			background-color: #fff;
			border-radius: 50rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon {
				width: 29rpx;
				height: 31.75rpx;
			}

			.search_input {
				flex: 1;
				height: 80rpx;
				padding-left: 20rpx;
				font-size: 32rpx;
				color: #393939;
			}
		}
	}

	// tab
	.tab_box {
		margin-top: 30rpx;
		width: 100%;
		// padding: 30rpx 70rpx 0;\
		display: flex;
		align-items: center;
		justify-content: space-between;

		.sel {
			// border: var(--borderSty);
			color: var(--selectColorSize);
			font-weight: 500;
		}

		.nsel {
			font-weight: 500;
			color: #3d3d3d;

		}

		.tab_dd {
			padding-right: 40rpx;
			// width: 190rpx;
			height: 56rpx;
			line-height: 50rpx;
			font-size: 32rpx;
			text-align: center;

			// border:var(--borderSty);
			// background-color:var(--borderSty);
			position: relative;
		}

		.tabActive {
			// // color: #863A3A;
			// color:var(--selectColorSize);
			background-color: red;

			font-weight: bold;
		}

		.tabActive::after {
			display: block;
			clear: both;
			content: '';
			width: 65%;
			height: 10rpx;
			// background:red;
			background: var(--selBcakborder);
			border-radius: 100rpx;
			position: absolute;
			left: 50%;
			bottom: -16rpx;
			transform: translateX(-50%);
		}
	}

	.mess_class {
		width: 690rpx;
		margin: 20rpx auto;


	}

	.mess_hang {
		margin: 20rpx auto;
		background-color:var(--QianmenonlyBackgournd);
		display: flex;
		border-radius: 25rpx;
		padding: 10rpx;
		align-items: center;
		// justify-content: space-around;

		.mess_image {
			width: 200rpx;
			height: 200rpx;
			margin: 10rpx;
			border-radius: 20rpx;
		}

		.mesee_name {
			color: #000;
			font-size: 33rpx;
			font-weight: 500;

		}

		.mesee_ip {
			color: #ACADAD;
			margin-top: 6rpx;

		}

		.mesee_xiangqing {
			color: red;
			text-decoration: underline;
			font-size: 27rpx;
		}
	}
</style>